import { useEffect, useState } from 'react';

import { useSearchParams } from 'react-router-dom';

import {
  Button as AButton,
  Descriptions as ADescriptions,
  Badge as ABadge,
  Spin as ASpin,
} from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';

import { type BizAlarmRuleInfo, rulesWarningDetailApi } from '@/api/rulesWarning';
import ExpandableDescriptions from '@/components/ExpandableCard/ExpandableDescriptions';
import { AlarmLevelEnum, AlarmTypeEnum, getEnumItem } from '@/constants';
import { useRouter } from '@/hooks/useRouter';
import { renderValue } from '@/utils/renderUtils';
import RuleEditBox from './RuleEdit';
/**
 * 告警规则配置详情页
 */
const WarningDetail: React.FC = () => {
  const [searchParams] = useSearchParams();
  const id = searchParams.get('id');
  const ruleId = searchParams.get('ruleId');
  console.log('id, ruleId', id, ruleId);
  const { back } = useRouter();
  const [loading, setLoading] = useState(true);
  const [warningDetail, setWarningDetail] = useState<BizAlarmRuleInfo | null>(null);

  // 获取告警规则详情
  const fetchWarningDetail = async () => {
    if (!id) return;

    try {
      setLoading(true);
      const res = await rulesWarningDetailApi({ id: Number(id) });
      if (res.success) {
        setWarningDetail(res.data);
        console.log('告警规则详情:', res.data);
      } else {
        window.$message.error(res.message || '获取告警规则详情失败');
      }
    } catch (error) {
      console.error('获取告警规则详情失败:', error);
      window.$message.error('获取告警规则详情失败');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchWarningDetail();
  }, [id]);

  // 获取告警级别标签
  const getAlarmLevelTag = (level?: number) => {
    if (level === undefined) return '未知';
    const levelItem = getEnumItem(AlarmLevelEnum, level);
    return levelItem ? levelItem.label : '未知';
  };

  // 获取告警类型标签
  const getAlarmTypeTag = (type?: number) => {
    if (type === undefined) return '未知';
    const typeItem = getEnumItem(AlarmTypeEnum, type);
    return typeItem ? typeItem.label : '未知';
  };

  if (loading) {
    return (
      <div className="flex justify-center items-center h-96">
        <ASpin size="large" />
      </div>
    );
  }

  if (!warningDetail) {
    return (
      <div className="text-center py-8">
        <p>告警规则详情不存在</p>
        <AButton onClick={back}>返回规则列表</AButton>
      </div>
    );
  }

  return (
    <div className="page-wrapper">
      <div className="page-title">
        <ArrowLeftOutlined className="mx-4" onClick={back} />
        <div className="page-main-title">告警规则配置</div>
        <div className="page-sub-title">告警规则详情页提供规则配置信息的查看和管理功能</div>
      </div>
      <div className="page-content-box">
        <div className="page-content">
          <ExpandableDescriptions
            title="基本信息"
            className="mb-6"
            defaultExpanded={true}
            basicItems={[
              <ADescriptions.Item key="alarmRuleName" label="规则名称">
                {renderValue(warningDetail.alarmRuleName)}
              </ADescriptions.Item>,
              <ADescriptions.Item key="level" label="告警级别">
                <ABadge
                  status={getEnumItem(AlarmLevelEnum, warningDetail.level)?.status as any}
                  text={getAlarmLevelTag(warningDetail.level)}
                />
              </ADescriptions.Item>,
              <ADescriptions.Item key="type" label="告警类型">
                {getAlarmTypeTag(warningDetail.type)}
              </ADescriptions.Item>,
              <ADescriptions.Item key="id" label="规则ID">
                {renderValue(warningDetail.id)}
              </ADescriptions.Item>,
            ]}
            expandedItems={[
              <ADescriptions.Item key="remark" label="规则描述" span={2}>
                {renderValue(warningDetail.remark)}
              </ADescriptions.Item>,
              <ADescriptions.Item key="createTime" label="创建时间">
                {renderValue(warningDetail.createTime)}
              </ADescriptions.Item>,
              <ADescriptions.Item key="updateTime" label="更新时间">
                {renderValue(warningDetail.updateTime)}
              </ADescriptions.Item>,
            ]}
          />
          <RuleEditBox />
        </div>
      </div>
    </div>
  );
};

export default WarningDetail;
